Rule-based user interface layout rearrangement

ABSTRACT

A device identifies one or more user interface elements, in a user interface, associated with a fixed positioning characteristic and not positioned within another user interface element with the fixed positioning characteristic. The device repositions the one or more user interface elements in the user interface to vacate space for a new user interface element based on a size of the new user interface element and forgo repositioning one or more other user interface elements in the user interface that do not have the fixed positioning characteristic or are positioned within another user interface element with the fixed positioning characteristic. The device inserts the new user interface element into the user interface in a portion of the user interface vacated in connection with repositioning the one or more user interface elements, and provides the user interface for display based on inserting the new user interface element into the user interface.

RELATED APPLICATIONS

This application is a continuation of U.S. patent application Ser. No.17/662,468, filed May 9, 2022 (now U.S. Pat. No. 11,747,973), which is acontinuation of U.S. patent application Ser. No. 16/692,066, filed Nov.22, 2019 (now U.S. Pat. No. 11,327,643), which is a continuation of U.S.patent application Ser. No. 16/281,816, filed Feb. 21, 2019 (now U.S.Pat. No. 10,489,041), the contents of which are incorporated herein byreference in their entireties.

BACKGROUND

A user interface may include a body with multiple user interfaceelements arranged to provide information to a user. For example, thebody of the user interface may include a first user interface elementwith a fixed position within the user interface and a second userinterface element with a relative position within the user interface. Inthis case, the first user interface element may be arranged at a centerof the user interface based on the fixed position, and the second userinterface element may be arranged a particular quantity of pixels awayfrom the first user interface element to avoid overlap. A third userinterface element may be associated with a fixed position within thefirst user interface element. For example, when the first user interfaceelement is a text entry box, the third user interface element may be abutton for submitting a text entry entered into the text entry box to aserver. User interfaces may be resized and/or rearranged based on anamount of available screen area (e.g., an amount of available pixels).For example, when a user interface size is reduced, complex calculationsmay be performed to adjust a size of each user interface element in theuser interface, to adjust a relative position of each user interfaceelement in the user interface, to ensure that a particular userinterface element remains within view in the user interface, and/or thelike.

SUMMARY

According to some implementations, a method may include receiving, by adevice, a request to alter a layout of a set of user interface elementsin a user interface for display on a display to insert a new userinterface element into the user interface at a particular location inthe user interface. The method may include identifying, by the device,characteristics of the set of user interface elements based on receivingthe request to alter the layout, wherein the identifying comprises:identifying, by the device, the set of user interface elements in theuser interface; identifying, by the device, a first subset of the set ofuser interface elements associated with a relative position in the userinterface and a second subset of the set of user interface elementsassociated with a fixed position in the user interface; and identifying,by the device, one or more first user interface elements, from thesecond subset of the set of user interface elements, that are positionedwithin a border of one or more second user interface elements of thesecond subset of the set of user interface elements. The method mayinclude repositioning, by the device, the set of user interface elementsbased on the characteristics of the set of user interface elements,wherein the repositioning comprises: repositioning, by the device, theone or more second user interface elements by an amount corresponding toa size of the new user interface element; repositioning, by the device,the one or more first user interface elements to remain within theborder of the one or more second user interface elements; andrepositioning, by the device, the first subset of the set of userinterface elements to maintain the relative position in the userinterface. The method may include inserting, by the device, the new userinterface element into the user interface in a portion of the userinterface vacated based on the repositioning of the set of userinterface elements, and providing, by the device, the user interface fordisplay based on inserting the new user interface element into the userinterface.

According to some implementations, a device may include one or morememories, and one or more processors, communicatively coupled to the oneor more memories, to identify one or more user interface elements, in auser interface, associated with a fixed positioning characteristic andnot positioned within another user interface element with the fixedpositioning characteristic. The one or more processors may repositionthe one or more user interface elements in the user interface to vacatespace for a new user interface element based on a size of the new userinterface element and forgo repositioning one or more other userinterface elements in the user interface that do not have the fixedpositioning characteristic or are positioned within another userinterface element with the fixed positioning characteristic. The one ormore processors may insert the new user interface element into the userinterface in a portion of the user interface vacated in connection withrepositioning the one or more user interface elements, and may providethe user interface for display based on inserting the new user interfaceelement into the user interface.

According to some implementations, a non-transitory computer-readablemedium may store instructions that include one or more instructionsthat, when executed by one or more processors of a device, cause the oneor more processors to receive a request to alter a layout of a set ofuser interface elements in a user interface for display on a display toinsert a new user interface element into the user interface at aparticular location in the user interface. The one or more instructionsmay cause the one or more processors to reposition a first userinterface element by an amount corresponding to a size of the new userinterface element, wherein the first user interface element isassociated with a fixed positioning characteristic and is not positionedinside any other user interface element of the user interface. The oneor more instructions may cause the one or more processors to repositiona second user interface element to remain within a border of the firstuser interface element, wherein the second user interface element isassociated with a fixed positioning characteristic. The one or moreinstructions may cause the one or more processors to reposition a thirduser interface element relative to the first user interface element,wherein the third user interface element is associated with a relativepositioning characteristic. The one or more instructions may cause theone or more processors to insert the new user interface element into theuser interface in a portion of the user interface vacated in connectionwith repositioning at least one of the first user interface element, thesecond user interface element, or the third user interface element. Theone or more instructions may cause the one or more processors to providethe user interface for display based on inserting the new user interfaceelement into the user interface.

BRIEF DESCRIPTION OF THE DRAWINGS

FIGS. 1A-1D are diagrams of an example implementation described herein.

FIG. 2 is a diagram of an example environment in which systems and/ormethods, described herein, may be implemented.

FIG. 3 is a diagram of example components of one or more devices of FIG.2 .

FIG. 4 is a flow chart of an example process for rule-based userinterface layout rearrangement.

FIG. 5 is a flow chart of an example process for rule-based userinterface layout rearrangement.

FIG. 6 is a flow chart of an example process for rule-based userinterface layout rearrangement.

DETAILED DESCRIPTION

The following detailed description of example implementations refers tothe accompanying drawings. The same reference numbers in differentdrawings may identify the same or similar elements.

When a user interface is resized, a user device may perform a set ofcomplex calculations to rearrange elements in the user interface. Forexample, the user device may recalculate sizes of user interfaceelements, recalculate relative positions of user interface elements,and/or the like to determine a layout for the user interface elements ina resized user interface. Such a resizing event may occur, for a userinterface of a website provided by a web browser, when a browserextension attempts to provide contextual information relating to thewebsite. For example, a payment extension may provide a drop-downtoolbar from a top of a display to provide information relating topayment on a merchant website. In this case, the drop-down toolbar mayprovide information identifying a payment option, information enabling auser to have payment information automatically provided to a merchant,and/or the like. Additionally, or alternatively, a drop-down toolbar maybe provided to enable automatic registration for merchant services. Inthese cases, the user device may resize a container for the website(e.g., the body of a user interface) to vacate space for the drop-downtoolbar. In other words, the user device may resize the user interfaceof the website to vacate space to insert a new user interface element,which may be the drop-down toolbar.

However, when resizing the user interface, transformation methods usedby the user device may result in the user device translating userinterface elements by X coordinates or by Y coordinates for an entiretyof content in the user interface, which may result in errors in alayout. For example, a user device may perform a translation action totranslate each user interface element downward in the user interface by20 pixels to vacate 20 pixels for a drop-down toolbar. In this case, theuser device may translate a first user interface element with a fixedpositioning, also termed absolute positioning, in a center of the userinterface downward by 20 pixels, which may result in the first userinterface element being partially off screen. This may require additionof a scroll bar, may result in additional computing resources being usedto scroll the user interface to put the first user interface element inview to a user, and/or the like.

Further, the user device may translate a second user interface elementlocated within the first user interface element (e.g., a button (thesecond user interface element) for submitting text of a text box (thefirst user interface element)). In this case, the user device maytranslate the second user interface element 20 pixels downward as partof a translation action applied to the first user interface element, andthen another 20 pixels downward as part of the translation actionapplied to the second user interface element. This may result in thesecond user interface element no longer being located within the firstuser interface element. Further, the user interface element maytranslate a third user interface element associated with a relativepositioning characteristic. In this case, the user device may, as partof a translation action, translate the third user interface element by20 pixels downward, which may result in whitespace being created in amiddle of the user interface, rather than creating desired whitespace atthe top of the user interface.

Such errors in user interface transformation may cause information to nolonger be visible in a user interface, may cause a crash or an error tobe provided when the user device attempts to position a user interfaceelement outside of a user interface, and/or the like. In view of this,the user device may be required to perform complex calculations todetermine available whitespace in a user interface, and identifymultiple translations to move user interface elements into the availablewhitespace while vacating an identified portion of the user interfacefor a new user interface element. Such calculations may waste processingresources to identify the available whitespace, may waste memoryresources to store information identifying locations of each userinterface element and/or borders thereof, and may result in a time-delayin rendering the user interface for display.

Some implementations described herein use rule-based user interfacelayout rearrangement to rearrange user interface elements in a userinterface to vacate space for inserting a new user interface element.For example, a user device may determine to translate user interfaceelements that match a pre-defined set of characteristics, such as beingassociated with fixed positioning and not being located within anotheruser interface element associated with fixed positioning, and may omitother user interface elements from a translation action. Rule-based userinterface layout rearrangement based on characteristics of userinterface elements may provide standardized user interface layoutrearrangement to reduce a quantity of translation actions that are to beperformed, thereby avoiding excess calculations relating to availablewhitespace, avoiding errors in positioning of user interface elements,and/or the like.

FIGS. 1A-1D are diagrams of an example implementation 100 describedherein. As shown in FIG. 1A, example implementation 100 includes a userdevice 102 used by a user and a merchant server device 104. Althoughsome implementations are described in terms of user device 102performing calculations and/or determinations, another device, such as acloud computing environment, may perform the calculations and/ordeterminations, and may provide results of the calculations and/ordeterminations for display via user device 102. For example, processingof a user interface to inject a new user interface element into the userinterface, as described below, may be performed by a layout managerplatform, as described below, that determines a layout of a userinterface, and provides the user interface for display via a display ofuser device 102.

As shown in FIG. 1A, and by reference numbers 120 and 122, user device102 may request and receive a merchant website. For example, user device102 may receive information identifying a domain name for the merchantwebsite as input (e.g., based on a user interaction with a userinterface of user device 102), and may communicate with merchant serverdevice 104 to obtain access to the merchant website. In someimplementations, user device 102 may receive program code associatedwith the merchant website. For example, when user device 102 requestsaccess to the merchant website, user device 102 may receive a document,including code for constructing a user interface for display in a webbrowser. In this case, user device 102 may execute the code to generateand provide user interface 124 for display to the user.

In some implementations, user device 102 may generate a set of userinterface elements for user interface 124. For example, user device 102may generate and position user interface elements A through G in a bodyof the user interface. In some implementations, one or more userinterface elements may be contained within one or more other userinterface elements. For example, as shown, user interface elements C andE may be contained within user interface elements B and D, respectively.In some implementations, one or more user interface elements may bepositioned outside of a display area of a display (e.g., in a userinterface area 126). For example, as shown, user interface element E maybe entirely located in user interface area 126, and user interfaceelement D may be partially located in user interface area 126. In thiscase, user interface 124 may include a scroll bar to enable a user toscroll user interface 124 to cause user interface elements D and E to beprovided in the display area of the display (e.g., and to cause otheruser interface elements, such as user interface element G) to be movedoutside of the display area of the display).

As shown in FIG. 1B, and by reference number 128, user device 102 maydetermine to inject a new user interface element into a merchant websiteuser interface. For example, user device 102 may determine to vacatespace in user interface 124, and insert a drop-down toolbar of a browserextension into user interface 124. In some implementations, user device102 may determine to inject a new user interface element into userinterface 124 based on a triggering event. For example, when a browserextension of a browser providing a merchant website detects that thebrowser extension can provide payment information relating to themerchant website, user device 102 may determine to vacate space toenable the browser extension to provide information relating to thepayment information (e.g., a user prompt, a selection of differentpayment options, and/or the like). Additionally, or alternatively, userdevice 102 may detect a user interaction with user interface 124associated with requesting injection of a new user interface element.For example, user device 102 may detect a resize operation associatedwith user interface 124, and may determine to vacate space in userinterface 124 in accordance with the resize operation and to enableother information to be provided in the vacated space.

As further shown in FIG. 1B, and by reference number 130, user device102 may determine characteristics 132 of user interface elements of userinterface 124. For example, user device 102 may determine a positioningattribute, a containment attribute, and/or the like. In this case, thepositioning attribute may include whether a user interface element isassociated with a fixed positioning (which may be termed absolutepositioning) or with a relative positioning. For example, user device102 may determine that user interface element A is associated with afixed positioning and that user interface element D is associated with arelative positioning. Similarly, user device 102 may determine that userinterface element A is not contained within a border of another userinterface element, and may determine that user interface element C iscontained within the border of user interface element B. In someimplementations, user device 102 may traverse a document object model(DOM) tree to determine characteristics of the user interface elements.For example, user device 102 may traverse the DOM tree to identify theuser interface elements for which to determine characteristics and/ormay traverse the DOM tree to determine a characteristic of a userinterface element. In this case, user device 102 may determine whether afirst user interface element is contained within a second user interfaceelement based on relative positions of the first user interface elementand the second user interface element in the DOM tree. Although someimplementations are described in terms of a tree, other data structuresmay be possible.

As shown in FIG. 1C, and by reference number 134, user device 102 mayreposition user interface elements to vacate space for a new userinterface element in accordance with a set of rules. In someimplementations, user device 102 may filter the set of user interfaceelements in accordance with the set of rules. For example, user device102 may filter the set of user interface elements to determine a subsetof user interface elements associated with a fixed positioning type ofattribute. In this case, user device 102 may filter the set of userinterface elements A-G to identify a subset of user interface elements(A, B, C, and G) associated with the fixed positioning attribute.Additionally, or alternatively, user device 102 may filter the subset ofuser interface elements to remove user interface elements that arecontained within other user interface elements with a fixed position.For example, user device 102 may filter user interface elements A, B, C,and G to identify another subset of user interface elements (e.g., A, B,and G). In this case, user device 102 may apply a translation to aposition of the other subset of user interface elements based on a sizeof the drop-down toolbar that user device 102 is to inject into userinterface 124.

In this way, user device 102 may generate an adjusted user interface124′ with an adjusted user interface area 126′. For example, user device102 may translate user interface elements A, B, and G downward by 50pixels (px) to vacate 50 pixels of vertical space for a drop-downtoolbar. In this case, based on, for example, user interface element Bbeing translated downward 50 pixels, user interface element C iscorrespondingly translated downward 50 pixels to remain in a sameposition within user interface element B in user interface 124′ as inuser interface 124. In this way, by filtering user interface element Cfrom the other subset of user interface elements, user device 102 avoidsincorrectly translating user interface element C by another 50 pixelswhich would result in user interface element C no longer being containedwithin a border of user interface element B. Similarly, by filteringuser interface element F from the other subset of user interfaceelements, user device 102 may maintain a relative position of userinterface element F aligned to user interface element B, rather thantranslating user interface element F downward resulting in userinterface element F losing alignment to user interface element B. Basedon omitting some user interface elements from translation, user device102 vacates space in a user interface without performing complex whitespace calculations to determine a repositioning of every user interfaceelement. Moreover, user device 102 reduces a likelihood of erroneouslayout transformations, such as layout transformations that cause userinterface elements to lose relative alignments as described above.

As shown in FIG. 1D, and by reference number 136, user device 102 mayinsert a new user interface element into the vacated space. For example,based on repositioning some of the user interface elements to vacatespace at a top of the user interface, user device 102 may insert userinterface element H into the user interface, which may be a drop-downtoolbar. Although some implementations are described in terms of adrop-down toolbar and vacating space at a top of a user interface, spacemay be vacated at a side of a user interface, at a bottom of a userinterface, in a middle of a user interface, and/or the like. In someimplementations, user device 102 may assign one or more attributesand/or characteristics to the new user interface element. For example,user device 102 may set the new user interface element as a relativepositioning user interface element (e.g., positioned relative to a topof the user interface, such that the new user interface element remainsat the top of a display when the user interface is scrolled). In someimplementations, user device 102 may select a particular version of thenew user interface element. For example, user device 102 may select aversion of the new user interface element, from multiple versions of thenew user interface element with multiple sizes, associated with a sizethat has been vacated in user interface 124. Additionally, oralternatively, user device 102 may determine the amount of space tovacate based on a size of an available version of the new user interfaceelement.

As further shown in FIG. 1D, and by reference number 138, user device102 may provide user interface 124′ for display. For example, userdevice 102 may provide the merchant website for display with thedrop-down toolbar injected into user interface 124′. In someimplementations, user device 102 may subsequently remove or resize thenew user interface element. For example, user device 102 may re-identifyuser interface elements associated with a fixed positioning and notlocated within other fixed positioning user interface elements, and maytranslate the re-identified user interface elements to remove vacatedspace or resize vacated space. In some implementations, user device 102may remove child user interface elements of the new user interfaceelement. For example, when user device 102 injects one or more childuser interface elements (e.g., user interface elements within a borderof the new user interface element), user device 102 may remove the oneor more child user interface elements when removing the new userinterface element. Additionally, or alternatively, user device 102 mayreattach the one or more child user interface elements to a parent userinterface element of the new user interface element. For example, whenthe new user interface element is in a body of user interface 124′, userdevice 102 may attach the one or more child user interface elements tothe body of user interface 124′. Additionally, or alternatively, whenthe new user interface element is within another user interface element(e.g., a box added into user interface element A), user device 102 mayreattach child user interface elements of the new user interface elementinto the other user interface element (e.g., attaching the child userinterface elements as contained within user interface element A when thenew user interface element is removed).

In some implementations, user device 102 may avoid re-identifying userinterface elements by using a cache. For example, user device 102 maystore, in a cache, information identifying which user interface elementswere translated to vacate space, and may reverse a translation appliedto the user interface elements identified in the cache. In this way,user device 102 avoids recalculation of user interface elementcharacteristics, avoids complex layout reorganization calculationsdescribed above, and/or the like. In some implementations, user device102 may monitor a document object model (DOM). For example, user device102 may monitor the DOM to identify any changes to user interfaceelements in user interface 124, and may use information regarding thechanges to user interface elements when removing the new user interfaceelement (e.g., by updating information stored in the cache).Additionally, or alternatively, user device 102 may alter a position ofone or more user interface elements based on detecting a change to theDOM, such as by selectively translating one or more of the userinterface elements.

As indicated above, FIGS. 1A-1D are provided merely as an example. Otherexamples may differ from what was described with regard to FIGS. 1A-1D.

FIG. 2 is a diagram of an example environment 200 in which systemsand/or methods, described herein, may be implemented. As shown in FIG. 2, environment 200 may include a user device 210, a server device 220, alayout manager platform 230, a computing resource 235, a cloud computingenvironment 240, and a network 250. Devices of environment 200 mayinterconnect via wired connections, wireless connections, or acombination of wired and wireless connections.

User device 210 includes one or more devices capable of receiving,generating, storing, processing, and/or providing information associatedwith providing a user interface. For example, user device 210 mayinclude a computer (e.g., a desktop computer, a laptop computer, atablet computer, a handheld computer, a server device, etc.), a mobilephone (e.g., a smart phone, a radiotelephone, etc.), an internet ofthings (IoT) device or smart appliance, or a similar device.

Server device 220 includes one or more devices capable of storing,processing, and/or routing information associated with providing awebsite. For example, server device 220 may be a merchant websiteserver, a data server, and/or the like. In some implementations, serverdevice 220 may include a communication interface that allows serverdevice 220 to receive information from and/or transmit information toother devices in environment 200.

Layout manager platform 230 includes one or more computing resourcesassigned to manage a layout of a website. For example, layout managerplatform 230 may be a platform implemented by cloud computingenvironment 240 that may perform calculations relating to rearrangingpositions of user interface elements in a user interface provided touser device 210 for display. In some implementations, layout managerplatform 230 is implemented by computing resources 235 of cloudcomputing environment 240.

Layout manager platform 230 may include a server device or a group ofserver devices. In some implementations, layout manager platform 230 maybe hosted in cloud computing environment 240. Notably, whileimplementations described herein describe layout manager platform 230 asbeing hosted in cloud computing environment 240, in someimplementations, layout manager platform 230 may be non-cloud-based ormay be partially cloud-based.

Cloud computing environment 240 includes an environment that deliverscomputing as a service, whereby shared resources, services, etc. may beprovided to manage a layout of user interface elements in a userinterface. Cloud computing environment 240 may provide computation,software, data access, storage, and/or other services that do notrequire end-user knowledge of a physical location and configuration of asystem and/or a device that delivers the services. As shown, cloudcomputing environment 240 may include layout manager platform 230 andcomputing resource 235.

Computing resource 235 includes one or more personal computers,workstation computers, server devices, or another type of computationand/or communication device. In some implementations, computing resource235 may host layout manager platform 230. The cloud resources mayinclude compute instances executing in computing resource 235, storagedevices provided in computing resource 235, data transfer devicesprovided by computing resource 235, etc. In some implementations,computing resource 235 may communicate with other computing resources235 via wired connections, wireless connections, or a combination ofwired and wireless connections.

As further shown in FIG. 2 , computing resource 235 may include a groupof cloud resources, such as one or more applications (“APPs”) 235-1, oneor more virtual machines (“VMs”) 235-2, virtualized storage (“VSs”)235-3, one or more hypervisors (“HYPs”) 235-4, or the like.

Application 235-1 includes one or more software applications that may beprovided to or accessed by user device 210. Application 235-1 mayeliminate a need to install and execute the software applications onuser device 210. For example, application 235-1 may include softwareassociated with layout manager platform 230 and/or any other softwarecapable of being provided via cloud computing environment 240. In someimplementations, one application 235-1 may send/receive informationto/from one or more other applications 235-1, via virtual machine 235-2.

Virtual machine 235-2 includes a software implementation of a machine(e.g., a computer) that executes programs like a physical machine.Virtual machine 235-2 may be either a system virtual machine or aprocess virtual machine, depending upon use and degree of correspondenceto any real machine by virtual machine 235-2. A system virtual machinemay provide a complete system platform that supports execution of acomplete operating system (“OS”). A process virtual machine may executea single program, and may support a single process. In someimplementations, virtual machine 235-2 may execute on behalf of a user(e.g., user device 210), and may manage infrastructure of cloudcomputing environment 240, such as data management, synchronization, orlong-duration data transfers.

Virtualized storage 235-3 includes one or more storage systems and/orone or more devices that use virtualization techniques within thestorage systems or devices of computing resource 235. In someimplementations, within the context of a storage system, types ofvirtualizations may include block virtualization and filevirtualization. Block virtualization may refer to abstraction (orseparation) of logical storage from physical storage so that the storagesystem may be accessed without regard to physical storage orheterogeneous structure. The separation may permit administrators of thestorage system flexibility in how the administrators manage storage forend users. File virtualization may eliminate dependencies between dataaccessed at a file level and a location where files are physicallystored. This may enable optimization of storage use, serverconsolidation, and/or performance of non-disruptive file migrations.

Hypervisor 235-4 provides hardware virtualization techniques that allowmultiple operating systems (e.g., “guest operating systems”) to executeconcurrently on a host computer, such as computing resource 235.Hypervisor 235-4 may present a virtual operating platform to the guestoperating systems, and may manage the execution of the guest operatingsystems. Multiple instances of a variety of operating systems may sharevirtualized hardware resources.

Network 250 includes one or more wired and/or wireless networks. Forexample, network 250 may include a cellular network (e.g., a long-termevolution (LTE) network, a code division multiple access (CDMA) network,a 3G network, a 4G network, a 5G network, another type of nextgeneration network, etc.), a public land mobile network (PLMN), a localarea network (LAN), a wide area network (WAN), a metropolitan areanetwork (MAN), a telephone network (e.g., the Public Switched TelephoneNetwork (PSTN)), a private network, an ad hoc network, an intranet, theInternet, a fiber optic-based network, a cloud computing network, or thelike, and/or a combination of these or other types of networks.

The number and arrangement of devices and networks shown in FIG. 2 areprovided as an example. In practice, there may be additional devicesand/or networks, fewer devices and/or networks, different devices and/ornetworks, or differently arranged devices and/or networks than thoseshown in FIG. 2 . Furthermore, two or more devices shown in FIG. 2 maybe implemented within a single device, or a single device shown in FIG.2 may be implemented as multiple, distributed devices. Additionally, oralternatively, a set of devices (e.g., one or more devices) ofenvironment 200 may perform one or more functions described as beingperformed by another set of devices of environment 200.

FIG. 3 is a diagram of example components of a device 300. Device 300may correspond to user device 210, server device 220, layout managerplatform 230, and/or computing resource 235. In some implementations,user device 210, server device 220, layout manager platform 230, and/orcomputing resource 235 may include one or more devices 300 and/or one ormore components of device 300. As shown in FIG. 3 , device 300 mayinclude a bus 310, a processor 320, a memory 330, a storage component340, an input component 350, an output component 360, and acommunication interface 370.

Bus 310 includes a component that permits communication among thecomponents of device 300. Processor 320 is implemented in hardware,firmware, or a combination of hardware and software. Processor 320 is acentral processing unit (CPU), a graphics processing unit (GPU), anaccelerated processing unit (APU), a microprocessor, a microcontroller,a digital signal processor (DSP), a field-programmable gate array(FPGA), an application-specific integrated circuit (ASIC), or anothertype of processing component. In some implementations, processor 320includes one or more processors capable of being programmed to perform afunction. Memory 330 includes a random access memory (RAM), a read onlymemory (ROM), and/or another type of dynamic or static storage device(e.g., a flash memory, a magnetic memory, and/or an optical memory) thatstores information and/or instructions for use by processor 320.

Storage component 340 stores information and/or software related to theoperation and use of device 300. For example, storage component 340 mayinclude a hard disk (e.g., a magnetic disk, an optical disk, amagneto-optic disk, and/or a solid state disk), a compact disc (CD), adigital versatile disc (DVD), a floppy disk, a cartridge, a magnetictape, and/or another type of non-transitory computer-readable medium,along with a corresponding drive.

Input component 350 includes a component that permits device 300 toreceive information, such as via user input (e.g., a touch screendisplay, a keyboard, a keypad, a mouse, a button, a switch, and/or amicrophone). Additionally, or alternatively, input component 350 mayinclude a sensor for sensing information (e.g., a global positioningsystem (GPS) component, an accelerometer, a gyroscope, and/or anactuator). Output component 360 includes a component that providesoutput information from device 300 (e.g., a display, a speaker, and/orone or more light-emitting diodes (LEDs)).

Communication interface 370 includes a transceiver-like component (e.g.,a transceiver and/or a separate receiver and transmitter) that enablesdevice 300 to communicate with other devices, such as via a wiredconnection, a wireless connection, or a combination of wired andwireless connections. Communication interface 370 may permit device 300to receive information from another device and/or provide information toanother device. For example, communication interface 370 may include anEthernet interface, an optical interface, a coaxial interface, aninfrared interface, a radio frequency (RF) interface, a universal serialbus (USB) interface, a Wi-Fi interface, a cellular network interface, orthe like.

Device 300 may perform one or more processes described herein. Device300 may perform these processes based on processor 320 executingsoftware instructions stored by a non-transitory computer-readablemedium, such as memory 330 and/or storage component 340. Acomputer-readable medium is defined herein as a non-transitory memorydevice. A memory device includes memory space within a single physicalstorage device or memory space spread across multiple physical storagedevices.

Software instructions may be read into memory 330 and/or storagecomponent 340 from another computer-readable medium or from anotherdevice 300. When executed, software instructions stored in memory 330and/or storage component 340 may cause processor 320 to perform one ormore processes described herein. Additionally, or alternatively,hardwired circuitry may be used in place of or in combination withsoftware instructions to perform one or more processes described herein.Thus, implementations described herein are not limited to any specificcombination of hardware circuitry and software.

The number and arrangement of components shown in FIG. 3 are provided asan example. In practice, device 300 may include additional components,fewer components, different components, or differently arrangedcomponents than those shown in FIG. 3 . Additionally, or alternatively,a set of components (e.g., one or more components) of device 300 mayperform one or more functions described as being performed by anotherset of components of device 300.

FIG. 4 is a flow chart of an example process 400 for rule-based userinterface layout rearrangement. In some implementations, one or moreprocess blocks of FIG. 4 may be performed by a layout manager platform(e.g., layout manager platform 230). In some implementations, one ormore process blocks of FIG. 4 may be performed by another device or agroup of devices separate from or including a layout manager platform(e.g., layout manager platform 230), such as a user device (e.g., userdevice 210), a server device (e.g., server device 220), and a computingresource (e.g., computing resource 235). For example, a user device mayperform one or more process blocks of FIG. 4 without a layout managerplatform, or may receive results of one or more process blocks of FIG. 4being performed by the layout manager platform (e.g., an altered userinterface layout), and may provide the results for display.

As shown in FIG. 4 , process 400 may include receiving a request toalter a layout of a set of user interface elements in a user interfacefor display on a display to insert a new user interface element into theuser interface at a particular location in the user interface (block410). For example, the layout manager platform (e.g., using processor320, memory 330, storage component 340, input component 350, andcommunication interface 370, and/or the like) may receive a request toalter a layout of a set of user interface elements in a user interfacefor display on a display to insert a new user interface element into theuser interface at a particular location in the user interface, asdescribed above.

As further shown in FIG. 4 , process 400 may include identifyingcharacteristics of the set of user interface elements based on receivingthe request to alter the layout (block 420). For example, the layoutmanager platform (e.g., using processor 320, memory 330, storagecomponent 340, input component 350, and communication interface 370,and/or the like) may identify characteristics of the set of userinterface elements based on receiving the request to alter the layout,as described above.

As further shown in FIG. 4 , process 400 and block 420 may includeidentifying the set of user interface elements in the user interface(block 422). For example, the layout manager platform (e.g., usingprocessor 320, memory 330, storage component 340, and/or the like) mayidentify the set of user interface elements in the user interface, asdescribed above.

As further shown in FIG. 4 , process 400 and block 420 may includeidentifying a first subset of the set of user interface elementsassociated with a relative position in the user interface and a secondsubset of the set of user interface elements associated with a fixedposition in the user interface (block 424). For example, the layoutmanager platform (e.g., using processor 320, memory 330, storagecomponent 340, and/or the like) may identify a first subset of the setof user interface elements associated with a relative position in theuser interface and a second subset of the set of user interface elementsassociated with a fixed position in the user interface, as describedabove.

As further shown in FIG. 4 , process 400 and block 420 may includeidentifying one or more first user interface elements, from the secondsubset of the set of user interface elements, that are positioned withina border of one or more second user interface elements of the secondsubset of the set of user interface elements (block 426). For example,the layout manager platform (e.g., using processor 320, memory 330,storage component 340, and/or the like) may identify one or more firstuser interface elements, from the second subset of the set of userinterface elements, that are positioned within a border of one or moresecond user interface elements of the second subset of the set of userinterface elements, as described above.

As further shown in FIG. 4 , process 400 may include repositioning theset of user interface elements based on the characteristics of the setof user interface elements (block 430). For example, the layout managerplatform (e.g., using processor 320, memory 330, storage component 340,and/or the like) may reposition the set of user interface elements basedon the characteristics of the set of user interface elements, asdescribed above.

As further shown in FIG. 4 , process 400 and block 430 may includerepositioning the one or more second user interface elements by anamount corresponding to a size of the new user interface element (block432). For example, the layout manager platform (e.g., using processor320, memory 330, storage component 340, and/or the like) may repositionthe one or more second user interface elements by an amountcorresponding to a size of the new user interface element, as describedabove.

As further shown in FIG. 4 , process 400 and block 430 may includerepositioning the one or more first user interface elements to remainwithin the border of the one or more second user interface elements(block 434). For example, the layout manager platform (e.g., usingprocessor 320, memory 330, storage component 340, and/or the like) mayreposition the one or more first user interface elements to remainwithin the border of the one or more second user interface elements, asdescribed above.

As further shown in FIG. 4 , process 400 and block 430 may includerepositioning the first subset of the set of user interface elements tomaintain the relative position in the user interface (block 436). Forexample, the layout manager platform (e.g., using processor 320, memory330, storage component 340, and/or the like) may reposition the firstsubset of the set of user interface elements to maintain the relativeposition in the user interface, as described above.

As further shown in FIG. 4 , process 400 may include inserting the newuser interface element into the user interface in a portion of the userinterface vacated based on the repositioning of the set of userinterface elements (block 440). For example, the layout manager platform(e.g., using processor 320, memory 330, and/or the like) may insert thenew user interface element into the user interface in a portion of theuser interface vacated based on the repositioning of the set of userinterface elements, as described above.

As further shown in FIG. 4 , process 400 may include providing the userinterface for display based on inserting the new user interface elementinto the user interface (block 450). For example, the layout managerplatform (e.g., using processor 320, memory 330, storage component 340,output component 360, and communication interface 370, and/or the like)may provide the user interface for display based on inserting the newuser interface element into the user interface, as described above.

Process 400 may include additional aspects, such as any single aspect orany combination of aspects described below and/or in connection with oneor more other processes described elsewhere herein.

In some implementations, the layout manager platform may cache thecharacteristics of the set of user interface elements. In someimplementations, the layout manager platform may receive another requestto resize or reposition the new user interface element, and may usecached information regarding the characteristics of the set of userinterface elements to alter the layout to resize or reposition the newuser interface element.

In some implementations, the layout manager platform may receive anotherrequest to remove the new user interface element from the userinterface, and may use cached information regarding the characteristicsof the set of user interface elements to alter the layout to remove thenew user interface element from the user interface. In someimplementations, the layout manager platform may receive another requestto remove the new user interface element from the user interface, andmay reposition the set of user interface elements based on thecharacteristics of the set of user interface elements and acharacteristic of the new user interface element as a response toreceive the other request.

In some implementations, the layout manager platform may monitor adocument object model (DOM) associated with altering the set of userinterface elements, may detect an alteration to the DOM based onmonitoring the DOM, and may alter the layout based on detecting thealteration to the DOM. In some implementations, the new user interfaceelement may be an information bar, that is positioned at a top of theuser interface, a bottom of the user interface, a left side of the userinterface, or a right side of the user interface.

Although FIG. 4 shows example blocks of process 400, in someimplementations, process 400 may include additional blocks, fewerblocks, different blocks, or differently arranged blocks than thosedepicted in FIG. 4 . Additionally, or alternatively, two or more of theblocks of process 400 may be performed in parallel.

FIG. 5 is a flow chart of an example process 500 for rule-based userinterface layout rearrangement. In some implementations, one or moreprocess blocks of FIG. 5 may be performed by a layout manager platform(e.g., layout manager platform 230). In some implementations, one ormore process blocks of FIG. 5 may be performed by another device or agroup of devices separate from or including a layout manager platform(e.g., layout manager platform 230), such as a user device (e.g., userdevice 210), a server device (e.g., server device 220), and a computingresource (e.g., computing resource 235). For example, a user device mayperform one or more process blocks of FIG. 5 without a layout managerplatform, or may receive results of one or more process blocks of FIG. 5being performed by the layout manager platform (e.g., an altered userinterface layout), and may provide the results for display.

As shown in FIG. 5 , process 500 may include identifying one or moreuser interface elements, in a user interface, associated with a fixedpositioning characteristic and not positioned within another userinterface element with the fixed positioning characteristic (block 510).For example, the layout manager platform (e.g., using processor 320,memory 330, storage component 340, input component 350, andcommunication interface 370, and/or the like) may identify one or moreuser interface elements, in a user interface, associated with a fixedpositioning characteristic and not positioned within another userinterface element with the fixed positioning characteristic, asdescribed above.

As further shown in FIG. 5 , process 500 may include repositioning theone or more user interface elements in the user interface to vacatespace for a new user interface element based on a size of the new userinterface element (block 520). For example, the layout manager platform(e.g., using processor 320, memory 330, storage component 340, inputcomponent 350, and communication interface 370, and/or the like) mayreposition the one or more user interface elements in the user interfaceto vacate space for a new user interface element based on a size of thenew user interface element, as described above.

As further shown in FIG. 5 , process 500 may include inserting the newuser interface element into the user interface in a portion of the userinterface vacated in connection with repositioning the one or more userinterface elements (block 530). For example, the layout manager platform(e.g., using processor 320, memory 330, storage component 340, inputcomponent 350, and communication interface 370, and/or the like) mayinsert the new user interface element into the user interface in aportion of the user interface vacated in connection with repositioningthe one or more user interface elements, as described above.

As further shown in FIG. 5 , process 500 may include providing the userinterface for display based on inserting the new user interface elementinto the user interface (block 540). For example, the layout managerplatform (e.g., using processor 320, memory 330, storage component 340,output component 360, and communication interface 370, and/or the like)may provide the user interface for display based on inserting the newuser interface element into the user interface, as described above.

Process 500 may include additional aspects, such as any single aspect orany combination of aspects described below and/or in connection with oneor more other processes described elsewhere herein.

In some implementations, the layout manager platform may reposition afirst user interface element, located within a border of a second userinterface element, such that the first user interface element remainslocated within the border of the second user interface element. In someimplementations, the layout manager platform may select, based on aninitial layout of the user interface, the new user interface elementfrom a plurality of candidate new user interface elements, where the newuser interface element is sized based on an availability of space in theinitial layout of the user interface, and, when inserting the new userinterface element, the layout manager platform may insert the new userinterface element based on selecting the new user interface element.

In some implementations, the layout manager platform may reposition aparticular user interface element with a fixed positioningcharacteristic, visible in an initial layout on a display, such that theparticular user interface element remains visible in a subsequent layouton the display after inserting the new user interface element. In someimplementations, the layout manager platform may reposition a particularuser interface element with a relative positioning characteristic,completely visible in an initial layout on a display, such that theparticular user interface element is at least partially hidden in asubsequent layout on the display after inserting the new user interfaceelement.

In some implementations, the layout manager platform may traverse adocument object model (DOM) tree to select the one or more userinterface elements from a plurality of user interface elements of theuser interface, and, when repositioning the one or more user interfaceelements, the layout manager platform may reposition the one or moreuser interface elements based on traversing the DOM tree. In someimplementations, the layout manager platform may maintain a position ofthe new user interface element in the user interface when the userinterface is moved.

Although FIG. 5 shows example blocks of process 500, in someimplementations, process 500 may include additional blocks, fewerblocks, different blocks, or differently arranged blocks than thosedepicted in FIG. 5 . Additionally, or alternatively, two or more of theblocks of process 500 may be performed in parallel.

FIG. 6 is a flow chart of an example process 600 for rule-based userinterface layout rearrangement. In some implementations, one or moreprocess blocks of FIG. 6 may be performed by a layout manager platform(e.g., layout manager platform 230). In some implementations, one ormore process blocks of FIG. 6 may be performed by another device or agroup of devices separate from or including a layout manager platform(e.g., layout manager platform 230), such as a user device (e.g., userdevice 210), a server device (e.g., server device 220), and a computingresource (e.g., computing resource 235).

As shown in FIG. 6 , process 600 may include receiving a request toalter a layout of a set of user interface elements in a user interfacefor display on a display to insert a new user interface element into theuser interface at a particular location in the user interface (block610). For example, the layout manager platform (e.g., using processor320, memory 330, storage component 340, input component 350, andcommunication interface 370, and/or the like) may receive a request toalter a layout of a set of user interface elements in a user interfacefor display on a display to insert a new user interface element into theuser interface at a particular location in the user interface, asdescribed above.

As further shown in FIG. 6 , process 600 may include repositioning afirst user interface element by an amount corresponding to a size of thenew user interface element, wherein the first user interface element isassociated with a fixed positioning characteristic and is not positionedinside any other user interface element of the user interface (block620). For example, the layout manager platform (e.g., using processor320, memory 330, storage component 340, input component 350, andcommunication interface 370, and/or the like) may reposition a firstuser interface element by an amount corresponding to a size of the newuser interface element, as described above. In some implementations, thefirst user interface element is associated with a fixed positioningcharacteristic and is not positioned inside any other user interfaceelement of the user interface.

As further shown in FIG. 6 , process 600 may include repositioning asecond user interface element to remain within a border of the firstuser interface element, wherein the second user interface element isassociated with a fixed positioning characteristic (block 630). Forexample, the layout manager platform (e.g., using processor 320, memory330, storage component 340, input component 350, and communicationinterface 370, and/or the like) may reposition a second user interfaceelement to remain within a border of the first user interface element,as described above. In some implementations, the second user interfaceelement is associated with a fixed positioning characteristic.

As further shown in FIG. 6 , process 600 may include repositioning athird user interface element relative to the first user interfaceelement, wherein the third user interface element is associated with arelative positioning characteristic (block 640). For example, the layoutmanager platform (e.g., using processor 320, memory 330, storagecomponent 340, input component 350, and communication interface 370,and/or the like) may reposition a third user interface element relativeto the first user interface element, as described above. In someimplementations, the third user interface element is associated with arelative positioning characteristic.

As further shown in FIG. 6 , process 600 may include inserting the newuser interface element into the user interface in a portion of the userinterface vacated in connection with repositioning at least one of thefirst user interface element, the second user interface element, or thethird user interface element (block 650). For example, the layoutmanager platform (e.g., using processor 320, memory 330, storagecomponent 340, input component 350, and communication interface 370,and/or the like) may insert the new user interface element into the userinterface in a portion of the user interface vacated in connection withrepositioning at least one of the first user interface element, thesecond user interface element, or the third user interface element, asdescribed above.

As further shown in FIG. 6 , process 600 may include providing the userinterface for display based on inserting the new user interface elementinto the user interface (block 660). For example, the layout managerplatform (e.g., using processor 320, memory 330, storage component 340,output component 360, and communication interface 370, and/or the like)may provide the user interface for display based on inserting the newuser interface element into the user interface, as described above.

Process 600 may include additional aspects, such as any single aspect orany combination of aspects described below and/or in connection with oneor more other processes described elsewhere herein.

In some implementations, the layout manager platform may storeinformation identifying alterations to the user interface to repositionthe first user interface element, the second user interface element, andthe third user interface element, may remove the new user interfaceelement from the user interface, and may restore the layout of the newuser interface based on the information identifying the alterations tothe user interface.

In some implementations, the new user interface element may be populatedwith information from a browser extension. In some implementations, theuser interface may be a browser. In some implementations, at least oneuser interface element, of the user interface, may be not moved in theuser interface by an amount corresponding to a size of the new userinterface element. In some implementations, the new user interfaceelement may be injected into the user interface.

Although FIG. 6 shows example blocks of process 600, in someimplementations, process 600 may include additional blocks, fewerblocks, different blocks, or differently arranged blocks than thosedepicted in FIG. 6 . Additionally, or alternatively, two or more of theblocks of process 600 may be performed in parallel.

The foregoing disclosure provides illustration and description, but isnot intended to be exhaustive or to limit the implementations to theprecise form disclosed. Modifications and variations may be made inlight of the above disclosure or may be acquired from practice of theimplementations.

As used herein, the term “component” is intended to be broadly construedas hardware, firmware, or a combination of hardware and software.

Some implementations are described herein in connection with thresholds.As used herein, satisfying a threshold may refer to a value beinggreater than the threshold, more than the threshold, higher than thethreshold, greater than or equal to the threshold, less than thethreshold, fewer than the threshold, lower than the threshold, less thanor equal to the threshold, equal to the threshold, or the like.

Certain user interfaces have been described herein and/or shown in thefigures. A user interface may include a graphical user interface, anon-graphical user interface, a text-based user interface, or the like.A user interface may provide information for display. In someimplementations, a user may interact with the information, such as byproviding input via an input component of a device that provides theuser interface for display. In some implementations, a user interfacemay be configurable by a device and/or a user (e.g., a user may changethe size of the user interface, information provided via the userinterface, a position of information provided via the user interface,etc.). Additionally, or alternatively, a user interface may bepre-configured to a standard configuration, a specific configurationbased on a type of device on which the user interface is displayed,and/or a set of configurations based on capabilities and/orspecifications associated with a device on which the user interface isdisplayed.

It will be apparent that systems and/or methods, described herein, maybe implemented in different forms of hardware, firmware, or acombination of hardware and software. The actual specialized controlhardware or software code used to implement these systems and/or methodsis not limiting of the implementations. Thus, the operation and behaviorof the systems and/or methods were described herein without reference tospecific software code—it being understood that software and hardwarecan be designed to implement the systems and/or methods based on thedescription herein.

Even though particular combinations of features are recited in theclaims and/or disclosed in the specification, these combinations are notintended to limit the disclosure of various implementations. In fact,many of these features may be combined in ways not specifically recitedin the claims and/or disclosed in the specification. Although eachdependent claim listed below may directly depend on only one claim, thedisclosure of various implementations includes each dependent claim incombination with every other claim in the claim set.

No element, act, or instruction used herein should be construed ascritical or essential unless explicitly described as such. Also, as usedherein, the articles “a” and “an” are intended to include one or moreitems, and may be used interchangeably with “one or more.” Furthermore,as used herein, the term “set” is intended to include one or more items(e.g., related items, unrelated items, a combination of related andunrelated items, etc.), and may be used interchangeably with “one ormore.” Where only one item is intended, the phrase “only one” or similarlanguage is used. Also, as used herein, the terms “has,” “have,”“having,” or the like are intended to be open-ended terms. Further, thephrase “based on” is intended to mean “based, at least in part, on”unless explicitly stated otherwise.

What is claimed is:
 1. A method, comprising: determining, by a device,to vacate space in a user interface based on a first user interfaceelement; filtering, by the device, a set of user interface elementsassociated with the user interface to determine a first subset of userinterface elements, of the user interface elements, associated with afirst type of attribute; identifying, by the device, a second subset ofuser interface elements, of the user interface elements, based onfiltering the set of user interface elements; applying a transformationto a second user interface element, of the second subset of userinterface elements, based on a characteristic of the first userinterface element; and generating, by the device, an adjusted userinterface based on applying the transformation to the second userinterface element.
 2. The method of claim 1, wherein determining tovacate the space in the user interface is based on detecting a resizeoperation associated with the first user interface element.
 3. Themethod of claim 1, wherein the characteristic of the first userinterface element includes one or more of: a positioning attribute, or acontainment attribute.
 4. The method of claim 1, wherein thecharacteristic of the first user interface element is determined basedon traversing a document object model tree.
 5. The method of claim 1,further comprising: filtering the second subset of user interfaceelements to remove particular user interface elements that are containedwithin other user interface elements with a fixed position.
 6. Themethod of claim 1, wherein the adjusted user interface is a differentsize than the user interface.
 7. The method of claim 1, furthercomprising: obtaining information assigning one or more attributes tothe first user interface element as a relative positioning userinterface element.
 8. A device, comprising: one or more memories; andone or more processors, coupled to the one or more memories, configuredto: determine to vacate space in a user interface based on a first userinterface element; filter a set of user interface elements associatedwith the user interface to determine a first subset of user interfaceelements, of the user interface elements, associated with a first typeof attribute; identify a second subset of user interface elements, ofthe user interface elements, based on filtering the set of userinterface elements; apply a transformation to a second user interfaceelement, of the second subset of user interface elements, based on acharacteristic of the first user interface element; and generate anadjusted user interface based on applying the transformation to thesecond user interface element.
 9. The device of claim 8, whereindetermining to vacate the space in the user interface is based ondetecting a resize operation associated with the first user interfaceelement.
 10. The device of claim 8, wherein the characteristic of thefirst user interface element includes one or more of: a positioningattribute, or a containment attribute.
 11. The device of claim 8,wherein the characteristic of the first user interface element isdetermined based on traversing a document object model tree.
 12. Thedevice of claim 8, wherein the one or more processors are furtherconfigured to: filter the second subset of user interface elements toremove particular user interface elements that are contained withinother user interface elements with a fixed position.
 13. The device ofclaim 8, wherein the adjusted user interface is a different size thanthe user interface.
 14. The device of claim 8, wherein the one or moreprocessors are further configured to: obtain information assigning oneor more attributes to the first user interface element as a relativepositioning user interface element.
 15. A non-transitorycomputer-readable medium storing a set of instructions, the set ofinstructions comprising: one or more instructions that, when executed byone or more processors of a device, cause the device to: determine tovacate space in a user interface based on a first user interfaceelement; filter a set of user interface elements associated with theuser interface to determine a first subset of user interface elements,of the user interface elements, associated with a first type ofattribute; identify a second subset of user interface elements, of theuser interface elements, based on filtering the set of user interfaceelements; apply a transformation to a second user interface element, ofthe second subset of user interface elements, based on a characteristicof the first user interface element; and generate an adjusted userinterface based on applying the transformation to the second userinterface element.
 16. The non-transitory computer-readable medium ofclaim 15, wherein determining to vacate the space in the user interfaceis based on detecting a resize operation associated with the first userinterface element.
 17. The non-transitory computer-readable medium ofclaim 15, wherein the characteristic of the first user interface elementincludes one or more of: a positioning attribute, or a containmentattribute.
 18. The non-transitory computer-readable medium of claim 15,wherein the characteristic of the first user interface element isdetermined based on traversing a document object model tree.
 19. Thenon-transitory computer-readable medium of claim 15, wherein the one ormore instructions further cause the device to: filter the second subsetof user interface elements to remove particular user interface elementsthat are contained within other user interface elements with a fixedposition.
 20. The non-transitory computer-readable medium of claim 15,wherein the one or more instructions further cause the device to: obtaininformation assigning one or more attributes to the first user interfaceelement as a relative positioning user interface element.